<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视距</title>
    <style>
        .box{
            margin: 0 auto;
            margin-top: 150px;
            width: 300px;
            height: 300px;
            background-color: #ccc;
            /* 当不设置视距的时候，视距就为无穷大，此时对图像的大小不会改变。 */
            perspective: 400px;
            /* 视距属于 transform 的前置属性，写在父级中
                视距越大，变化越小，反之，视距越小，变化越大。
                视距的默认值是无穷大 */
        }
        .box .row{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .box .row:hover{
            /* 透视值越大，图像就越大，正值时是向前移动，为负值时是向后位移。 */
            transform: translateZ(-100px);
            /* Z 轴：正值向前，负值向后
                Z 轴方向位移不能设置百分比 */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="row"></div>
    </div>
</body>
</html>